<template>
    <div class="md-content">
        <div v-html="HTMLContent"></div>
    </div>
</template>

<script>
export default {
  props: {
    HTMLContent: String
  }
};
</script>

<style lang="scss" scoped>
/**  因为是通过 v-html 注入的，当前样式如果不加深度标签将不起作用，并且Scss 对 >>> 不识别，改用 /deep/  ,详情见https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html */
$codeBgColor:#f8f8f8;
$codeBorder:solid 1px #ccc;

.md-content {
  line-height: 2rem;
  word-spacing: 0.1em;
  padding: 10px;

  /deep/ {
    h1 {
      font-size: 2rem;
      line-height: 5.2rem;
      border-bottom: solid 1px #ccc;
    }
    h2 {
      font-size: 1.6rem;
      line-height: 5rem;
    }
    h3,
    h4,
    h5,
    h6 {
        line-height: 5rem;
    }
    pre{
        background: $codeBgColor;
        border: $codeBorder;
        padding: 6px 8px;
        border-radius: 3px;
        margin: 4px 0;
        overflow: auto;
    }
    p,ul,li,div{
        line-height: 2.35rem;
        font-size: 1.15rem;
    }
    code{
        color:rgb(194, 55, 55);
        margin: 0 2px;
        font-size: 1.1em;
    }

    ul{
        li{
            margin-left:2rem;
        }
    }
  }
}
</style>